<#include "../common/header.htm">
<div class="content-wrapper" id="uploadFile">
	<section class="content">
		<el-select v-model="id" placeholder="请选择">
			<el-option
					v-for="item in options"
					:key="item.vid"
					:label="item.mobanname"
					:value="item.vid">
			</el-option>
		</el-select>
		<div class="box">
			<form action="#" method="get" id="listForm" >
				<div class="form-group">
					<input id="file-1"   accept=".pdf,.csv, .xls, .xlsx,.txt" type="file" name="fileUpload" multiple="multiple" class="file" data-overwrite-initial="false" />
				</div>
			</form>
		</div>
	</section>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">导入总结</h4>
			</div>
			<div class="modal-body" id="addtitlepoolform">
				<div id="addform">
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<div class="modal fade" id="loadingModal2" aria-hidden=”true” data-backdrop=”static”>
	<div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
		<div class="progress progress-striped active" style="margin-bottom: 0;">
			<div class="progress-bar" style="width: 100%;"></div>
		</div>
		<h5 style="color:black"> <strong>正在上传Excel...请稍等！</strong> </h5>
	</div>
</div>
<script type="text/javascript">
	var vm=new Vue({
		el: '#uploadFile',
		data: {
			options:{},
			id:''
		},
		created: function () {
			this.getTemplateList()
		},
		methods:{
			getTemplateList(){
				axios.post('${ctx}/onekey/listAll',{}).then(function (response) {
					vm.options=response.data.data
				})
			}
		}
	})

	/*初始化fileinput插件*/
	$("#file-1").fileinput({
		language: 'zh',//汉化
		uploadUrl : '${ctx}/onekey/uploadFile',//上传地址
		allowedFileExtensions : ['txt' ,'csv', 'xls' , 'xlsx','pdf'],//支持格式
		showClose : false,//屏蔽x号关闭案件
		uploadAsync:false,//采用同步上传
		showUploadedThumbs : false,//是否在预览窗口中持续显示上传的文件缩略图
		showRemove : false,//关闭删除按钮
		overwriteInitial : false,//将其设置为false将有助于始终从数据库中显示已保存的图像或文件
		browseOnZoneClick : true,//浏览区域点击
		autoReplace : true,//是否自动替换当前文件，设置为true时，再次选择文件， 会将当前的文件替换掉。
		maxFileSize : 0,
		maxFilesNum : 0,
		maxFileCount:10,
		removeFromPreviewOnError : true,
		layoutTemplates :{
			actionUpload : '',
	        actionZoom : ''   //去除上传预览缩略图中的查看详情预览的缩略图标。
	    },
	    initialPreviewAsData: true,
        allowedPreviewTypes :null, //设置为空，null或false以禁用所有类型的预览
        //showPreview :true, //是否显示预览
	    preferIconicPreview: true, // 开启用图标替换预览效果
	    previewFileIconSettings: {
            'docx': '<i class="fa fa-file-word-o text-primary"></i>',
            'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
            'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
            'doc': '<i class="fa fa-file-word-o text-primary"></i>',
            'xls': '<i class="fa fa-file-excel-o text-success"></i>',
            'ppt': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
            'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
            'txt': '<i class="fa fa-file-text-o text-info"></i>',
	    },
		slugCallback : function(filename) {
			return filename.replace('(', '_').replace(']', '_');
		},
		uploadExtraData:function(previewId, index) {//额外参数的关键点
			let t={vid:vm.id}
			return t;
		}
		}).on('filepreupload', function(event, data, previewId, index) {     //上传中
	    var form = data.form, files = data.files,filenames = data.filename, extra = data.extra,
	    response = data.response, reader = data.reader;

	}).on("filebatchuploadsuccess", function(event, data) {    //文件上传成功
	    console.info(data)
		$('#loadingModal2').modal('hide');
		var htmlContent = "";
		if (data.response.code==20000){
			$.each(data.response.data,function (i,n) {
				htmlContent +="<div class=\"form-group\">\n" +
						"<label for=\"lastname\" class=\"col-sm-6 control-label\">文件名："+n.fileName+"</label>\n"
				if(n.successNum>0){
					htmlContent +="<label for=\"lastname\" class=\"col-sm-3 control-label\">导入成功"+n.successNum+"条</label>\n"
				}else {
					htmlContent +="<label style='width: 50%;' for=\"lastname\" class=\"col-sm-3 control-label\">导入失败"+n.errorInfo+"</label>\n"
				}
				if(n.errorNum>0){
					htmlContent +="<label for=\"lastname\" class=\"col-sm-3 control-label\">导入失败"+n.errorNum+"条</label>\n"
				}
				htmlContent +="</div>"
			})
			$("#addform").html(htmlContent);
			$('#myModal').modal('show')
		} else{
			if (!vm.id) {
				toastr.error("请先选择模板","提示信息");
			}
		}
	}).on('fileerror', function(event, data, msg) {
		
	}).on("filesuccessremove", function(event, data) {
    }).on("fileuploaded", function(event, data, previewId, index) {

	});
	
	$(".fileinput-upload-button").on("click",function () {
		$("#loadingModal2").modal({backdrop: 'static', keyboard: false});
	})
</script>
<style>
		#myModalLabel {
			color:black;
			text-align: left;
		}
		div#addform {
			overflow: hidden;
		}
		.modal-body {
			padding: 10px;
		}
		.el-select-dropdown__item.selected{
			background: #FFFFFF;
		}
		.el-select-dropdown__item.selected.hover{
			background: #f5f7f5 !important;
		}
		.el-select-dropdown__item.selected{
			color: #409EFF;
		}
		.form-control{
			width: 200px;
		}
	</style>
<#include "../common/footer.htm">